import React, { Component } from 'react'
import { Route } from 'react-router-dom';
import "./Home.css"
import Manager from "../Manager/Manager"
import Product from '../Product/Product';
import Classify from '../Classify/Classify';
import Orders from '../Orders/Orders'
import Statistics from "../Statistics/Statistics"
// import List from '../List/List'
// import Test from "../Test/Test"
import Add from "../Orders/component/Add"
import { Layout, Menu,Button } from 'antd';
const { Header, Sider, Content } = Layout;
export default class Home extends Component {
    state = {
        collapsed: false,
        activeMenu:JSON.parse(sessionStorage.getItem("activeMenu"))||['statistics']
      };
    
      toggle = () => {
        this.setState({
          collapsed: !this.state.collapsed,
        });
      };
      //跳转页面
      jump=(item)=>{
        sessionStorage.setItem("activeMenu",JSON.stringify(item.keyPath))
        this.setState({
          activeMenu:item.keyPath
        })
        this.props.history.push("/home/"+item.key)
        
      }
  render() {
    const {activeMenu} = this.state
    return (
        <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo">{this.state.collapsed?'系统':'汽车后台管理系统'}</div>
          <Menu theme="dark" mode="inline" defaultSelectedKeys={activeMenu} onClick={this.jump}>
            <Menu.Item key="statistics" className='iconfont icontongzhi'>
             统计
            </Menu.Item>
            <Menu.Item key="manager" className='iconfont icontongzhi' >
            管理员
            </Menu.Item>
            <Menu.Item key="classify" className='iconfont icontongzhi' >
              分类
            </Menu.Item>
            <Menu.Item key="product" className='iconfont icontongzhi' >
              产品
            </Menu.Item>
            <Menu.Item key="orders" className='iconfont icontongzhi' >
              订单
            </Menu.Item>
            {/* <Menu.Item key="list" className="iconfont icontongzhi">
              测试
            </Menu.Item> */}
            {/* <Menu.Item key="test" className="iconfont icontongzhi">
              测试2
            </Menu.Item> */}

          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background">
           <i className={this.state.collapsed?'iconfont iconmenuon':'iconfont iconmenuoff'} onClick={this.toggle}></i>
           <Button type='primary'>退出</Button>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            <Route path="/home/manager" component={Manager}></Route>
            <Route path="/home/product" component={Product}></Route>
            <Route path="/home/classify" component={Classify}></Route>
            <Route path="/home/statistics" component={Statistics}></Route>
            <Route path="/home/orders" component={Orders}></Route>
            {/* <Route path="/home/list" component={List}></Route> */}
            {/* <Route path="/home/test" component={Test}></Route> */}
            <Route path="/home/add" component={Add}></Route>

          </Content>
        </Layout>
      </Layout>
    )
  }
}
